<!--水果生产经营实体情况调查-->
<style scoped>
.reportTable {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-size: 14px;
}

.reportTable>tr {
	line-height: 28px;
}

.reportTable>tr>td {
	border: 1px solid #000;
}

.reportTable>tr>td>input {
	width: 100%;
	border: none;
	text-align: center;
	line-height: 28px;
}

.reportTable>tr>td>span {
	color: green;
	font-size: 14px;
}

.reportTable>caption {
	font-size: 24px;
}

.ivu-tabs-tabpane {
	height: 450px;
	overflow: auto;
	overflow-x: auto;
}

.ivu-tabs-nav-container {
	font-size: 16px;
}

.ivu-modal-body {
	padding: 10px !important;
}

.ivu-modal-footer {
	padding: 10px !important;
}

.ivu-collapse-header {
	font-size: 16px;
}

thead {
	font-size: 16px;
}

th>.ivu-table-cell {
	font-size: 16px !important;
}

.tabletitle {
	margin-bottom: 15px;
	font-size: 16px !important;
}

.tabletitle>.ivu-form-item-content>input {
	float: right;
}
</style>
<template>
	<div>
		<div class="table">
			<div class="divSearch" style="padding: 6px;">
				<row>
					<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<span>动作名称:</span>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" v-model="searchModel.ActionName" placeholder="请输入..." class="searchInput"></Input>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<span>操作地址:</span>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" v-model="searchModel.ActionCode" placeholder="请输入..." class="searchInput"></Input>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<label style="margin-top:10px;">操作人:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" v-model="searchModel.Account" placeholder="请输入..." class="searchInput"></Input>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}" class="searchLabel">
						<label>日志时间:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Date-picker type="date" v-model="searchModel.LogsTime" placeholder="请选择..." class="searchInput"></Date-picker>
					</i-col>
					<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}" class="searchLabel" style="padding: 6px;">
						<label style="margin-top:10px;">IP地址:</label>
					</i-col>
					<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" v-model="searchModel.IpAddress" placeholder="请输入..." class="searchInput"></Input>
					</i-col>
					<i-col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
						<Button icon="ios-search" type="ghost" @click="Search()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff; margin-right: 0;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
							查询
						</Button>
					</i-col>
				</row>
			</div>
			<Row>
				<Col span="24" class="col-margin">
				<Table size="large" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
				</Col>
			</Row>
			<Row>
				<!--分页插件-->
				<div class="dataTable">
					<i-col>
						<Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
					</i-col>
				</div>
			</Row>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		//数据验证对象
		const validateNum = (rule, value, callback) => {
			if (value.length != 0) {
				if (isNaN(value)) {
					callback(new Error('请输入数字'));
				}
				else {
					if (value < 0) {
						callback(new Error('最小值为0'));
					}
					else {
						if (value > 0) {
							var propertyName = rule.field;
							this.Heighlight[propertyName] = true;//动态修改高亮

						}
						else {
							var propertyName = rule.field;
							this.Heighlight[propertyName] = false;//动态修改高亮
						}
						callback();
					}
				}
			}
			else {
				callback(new Error('值不能为空'));
			}

		};
		return {
			self: this,
			loading: false,//加载动画开关
			clientHeight: window.innerHeight - 315,//表格默认高度
			//查询模型：根据需求删除不不要查询条件
			searchModel: {
				Id: '',
				ActionName: '',
				ActionCode: '',
				Account: '',
				LogsTime: '',
				IpAddress: '',
				PageNumber: 1, PageSize: 20
			},
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			datas: {},//table数据对象
			spinShow: true,//加载动画开关
			showCollapse: 1,//显示的手风琴项
			ctx: this,//table数据上下文
			columnsList: [//表头对象
				{ title: "动作名称", key: "ActionName" },
				{ title: "操作地址", key: "ActionCode" },
				{ title: "操作人", key: "Account" },
				{ title: "日志时间", key: "LogsTimeString" },
				{ title: "IP地址", key: "IpAddress" },
				{
					title: "操作", key: "Id", width: 200, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: { ideleteColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-trash-outline'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.delInfo(params.row.Id)
									}
								}
							}, '删除'),
						])
					}
				}
			]
		}
	},
	mounted() {
		const that = this;
		window.onresize = () => {//动态设置数据表的高度
			return (() => {
				that.clientHeight = window.innerHeight - 315;
			})()
		};
	},
	methods: {
		//删除对象
		delInfo(id) {
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("Logs", { params: { id: id } }).then(
						function (res) {
							if (res.data.status == 1) {
								self.$Notice.success({ title: '删除成功！', desc: false });
								self.initTableData();
							}
							else {
								self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
							}
						}
					);
				}
			});
		},
		//查询方法
		Search() {
			this.initTableData();
		},
		initTableData() {//初始化数据
			var self = this;
			self.$http.post('Logs/PostPageList', this.searchModel).then(function (res) {
				if (res.data.status === 1) {
					self.datas = res.data;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			});
		},
		//获取当前页码
		getPageNumber(pageIndex) {
			this.searchModel.PageNumber = pageIndex;
			this.initTableData();
		},
		//获取当前分页大小
		getPageSize(pageSize) {
			this.searchModel.PageSize = pageSize;
			this.initTableData();
		},
	},
	created: function () { //初始化函数
		this.initTableData();
	}
}
</script>